import React, { PureComponent } from 'react';
import { Card, Menu } from 'antd';
import TaskOption from './TaskOption';
import TaskDeliver from './TaskDeliver';
import VideoScript from './VideoScript'

export default class TaskCreeation extends PureComponent {
  state = {
    currentKey: 'channel',
  }
  componentDidMount() {
    window.scrollTo(0, 0);
  }
  handleClick = (e) => {
    this.setState({
      currentKey: e.key,
    });
  }
  render() {
    const { currentKey } = this.state;
    let content = currentKey;
    if (currentKey === 'channel') {
      content = <TaskOption />
    } else if (currentKey === 'activity') {
      content = <TaskDeliver />
    } else if (currentKey === 'script') {
      content = <VideoScript />
    }
    return (
      <div>
        <Card bodyStyle={{ paddingBottom: 0 }}>
          <Menu
            style={{ marginTop: 10, borderBottom: 'none' }}
            onClick={this.handleClick}
            selectedKeys={[this.state.currentKey]}
            mode="horizontal"
          >
            <Menu.Item key="channel">
              频道投稿
            </Menu.Item>
            <Menu.Item key="activity">
              活动投稿
            </Menu.Item>
            <Menu.Item key="script">
              脚本
            </Menu.Item>
          </Menu>
        </Card>
        <div style={{ marginTop: 20 }}>
          {content}
        </div>
      </div>
    );
  }
}
